<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>
  <div class="udukb">  <!--导栏-->
    <a href={% url 'index' %}><img src="{% static 'img/loog.png' %}" width="200px" height="60px"></a>
        <div class="aeuj">
            <ul>
                <li ><a href={% url 'index' %} >音乐馆</a></li>
                <li><a href={% url 'ujqi_rdtf' %} class="yoqc">音乐排行</a></li>
                <li><a href={% url 'wd' %}>我的音乐</a></li>
            </ul>
        </div>
        <div class="rtfp">
            <input type="text">
            <div><span class="layui-icon">&#xe615;</span></div>-
        </div>
        {% if current_etyn == None %}
          <a href={% url 'logn' %}><span>登录</span></a>
        {% else %}
        <div>
          <ul class="layui-nav" lay-bar="disabled">
            <li class="layui-nav-item" lay-unselect="">
              <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
              <dl class="layui-nav-child">
                <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        {% endif %}
</div>
    <div class="rdtf">
      <div class="supw">
        <h1 align="center" style="margin-bottom:10px;padding-top:10px; color:white;">热歌榜</h1>
        <hr>
        <ul>
          {% for i in rvsk%}
            <li><a href="{% url 'sm_yung' %}?id={{i.skma_id}}"><span>{{forloop.counter}}&nbsp;&nbsp;{{i.skma_name}}</span> <span>{{i.skrt}}</span></a></li>
          {% endfor %}
        </ul>
      </div>
      <div class="supw">
        <h1 align="center" style="margin-bottom:10px;padding-top:10px; color:white;">收藏榜</h1>
        <hr>
        <ul>
          {% for i in nhad %}
            <li><a href="{% url 'sm_yung' %}?id={{i.skma_id}}"><span>{{forloop.counter}}&nbsp;&nbsp;{{i.skma_name}}</span> <span>{{i.skrt}}</span></a></li>
          {% endfor %}
        </ul>
      </div>
      <div class="supw">
        <h1 align="center" style="margin-bottom:10px;padding-top:10px; color:white;">新歌榜</h1>
        <hr>
        <ul>
          {% for i in ussk %}
            <li><a href="{% url 'sm_yung' %}?id={{i.skma_id}}"><span>{{forloop.counter}}&nbsp;&nbsp;{{i.skma_name}}</span> <span>{{i.skrt}}</span></a></li>
          {% endfor %}
        </ul>
      </div>
    </div>
</body>
<style>
  .layui-nav{
    background-color:#ffffff;
  }
  .rdtf{
    width:1080px;
    margin:0 auto;
    margin-top:40px;
    display: flex;
    justify-content: space-around;
  }
  .supw{
    width:280px;
    height: 400px;
    background:url('../static/img/uxjy.png');
    border-radius: 30px;
  }
  .supw ul li{
    margin:10px 0;
    width:280px;
  }
  .supw ul li:hover{
    background-color: #797a7a8a;
  }
  .supw ul li a{
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    color:white;
  }
</style>
<style>  
/* 头部导航栏 */
    .udukb{
        width:1080px;
        height:60px;
        margin:0 auto;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .aeuj ul{
        list-style: none;
    }
    .aeuj ul li{
        display: inline;
        padding-left:10px;
        padding-right: 10px;
        font-size: 18px;
    }
    .yoqc{
        color:#1E9FFF;
    }
    .rtfp input{
        height:25px;
        border: none;
        border-top:1px black solid;
        border-bottom:1px black solid;
        border-left:1px black solid;
        font-size: 16px;
    }
    .rtfp{
        display: flex;
    }
    .rtfp div{
        height:25px;
        width:20px;
        border-top:1px black solid;
        border-right:1px black solid;
        border-bottom:1px black solid;
        line-height: 25px;
    }
</style>

</html>